<!--
 * @Date: 2024-11-21 15:35:50
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2024-12-20 16:24:36
 * @Description: 我的任务
-->
<template>
  <div class="hp-task-panel">
    <div class="hp-task-panel-header" v-if="schema.showHeader">
      <div class="header-title">{{ schema.label }}</div>
      <div class="header-tools"></div>
    </div>
    <div class="hp-task-panel-body" v-hpresize="panelResize">
      <template v-if="taskList.length === 0">
        <ElEmpty description="暂无内容" :image-size="60"/>
      </template>
      <template v-else-if="taskList.length === 1">
        <div class="hp-task-single">
          <TaskCard
            :design="design"
            :slice-num="taskState.cardSliceNum"
            :task-item="taskList[0]"
            :task-data="taskData"
          />
        </div>
      </template>
      <template v-else>
        <el-tabs
          type="border-card"
          :class="[ 'hp-task-tabs', schema.showHeader ? 'no-top-border' : '']"
          v-model="taskState.activeName"
        >
          <el-tab-pane
            v-for="taskItem in taskList"
            :key="taskItem.id"
            :label="taskItem.name"
            :name="taskItem.id"
          >
            <template #label>
              <div class="hp-task-tabs-label">{{ taskItem.name }}</div>
            </template>
            <TaskCard
              :design="design"
              :slice-num="taskState.cardSliceNum"
              :task-item="taskItem"
              :task-data="taskData"
            />
          </el-tab-pane>
        </el-tabs>
      </template>
      
    </div>
  </div>
</template>

<script setup>
import { commonProps } from '@hp/panels/cfg.js'
import { watch, ref, reactive, computed, onMounted, nextTick } from 'vue';

import TaskCard from './components/TaskCard.vue'

import { useDbSource } from '@hp/hooks/useDbSource.js'
import { ElEmpty } from 'element-plus';

const emits = defineEmits([ 'mounted' ])
const props = defineProps({
  ...commonProps
})

const dbsourceHook = useDbSource({ ...props })

const taskData = ref({})
const taskList = computed(() => {
  const taskList = props.schema.taskList
  if (taskList.length > 0) { taskState.activeName = taskList[0].id }
  return taskList
})
const taskState = reactive({
  activeName: '',
  cardSliceNum: 3
})

const loadData = async () => {
  const res = await dbsourceHook.loadDataSource(props.schema)
  taskData.value = res || []
}

/**
 * 面板尺寸变化
 * 
 * @param w 宽度
 * @param h 高度
 */
const panelResize = (w, h) => {
  setTimeout(() => {
    const num = Math.floor((w - 18) / 220)
    taskState.cardSliceNum = num
  }, 150)
}

onMounted(() => {
  nextTick(() => { emits('mounted') })
})

watch(
  () => props.schema.dataSource,
  (nv, ov) => {
    loadData()
  },
  { deep: true, immediate: true }
)

</script>

<style lang="scss" scoped>
.hp-task-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  &-header {
    height: 45px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    border-bottom: 1px solid #dcdfe6;
    .header-title {
      font-weight: bold;
    }
    .header-tools {
      margin-left: auto;
    }
  }
  &-body {
    flex: 1;
    min-height: 10px;
    padding: 0;
    overflow: auto;
  }
  .hp-task-single {
    padding: 18px;
  }
}
.hp-task-tabs {
  height: 100%;
  &.no-top-border {
    border-top: none;
  }
  :deep(.el-tabs__header) {
    margin: 0;
  }
  :deep(.el-tabs__item) {
    padding: 0 !important;
  }
  :deep(.el-tabs__content) {
    padding: 18px;
    overflow: auto;
  }
  .hp-task-tabs-label {
    padding: 0 20px;
  }
}
.hp-task-cards {
  display: grid;
  gap: 12px 12px;
  height: 100%;
  grid-template-columns: repeat(3, minmax(50px,1fr));
  .hp-task-card {
    height: 100%;
    border: 1px solid #ececec;
    border-radius: 5px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    .hp-task-card-body {
      flex: 1;
      min-height: 10px;
      display: flex;
      .card-body-left {
        .card-icon {
          width: 60px;
          height: 60px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          color: var(--el-color-primary);
          background-color: var(--el-color-primary-light-8);
          margin-right: 15px;
        }
        .card-image {
          width: 60px;
          height: 60px;
          margin-right: 16px;
          img {
            height: 100%;
          } 
        }
      }
      .card-body-right{
        flex: 1;
        display: flex;
        align-items: center;
        padding: 0 8px 0 0;
        .card-info-item {
          // text-align: center;
          margin-bottom: 8px;
          &:last-child {
            margin-bottom: 0;
          }
        }
        .card-info-label {
          font-size: 14px;
          font-weight: 500;
        }
        .card-info-value {
          color: var(--el-color-primary);
          font-size: 22px;
          font-weight: 600;
        }
      }
    }
  }
}
</style>